<template>
    <h2>vuex页面</h2>
    <p>count:  {{ count }}</p>
    <p>temTimes: {{ tenTimes }}</p>
    <button @click="updataVuexcount">修改count</button>
    <button @click="asyncIncrement">修改count-action</button>
    <H2>module</H2>
    <p>moduleA: countA {{ store.state.a.countA}}</p>
    <p>moduleA: countA {{ store.state.b.countB}}</p>
</template>

<script setup>
 import {computed} from 'vue'
 import { useStore } from 'vuex';

 //获取vuex实例化对象
 const store=useStore()

 const count = computed(() => store.state.count)
 const tenTimes = computed(() =>  store.getters.tenTimes)

 //触发mutation
 const updataVuexcount = () =>{
    store.commit("increment",{count:20})
 }

 //使用action
 const asyncIncrement = () => store.dispatch('asyncIncrement',{count:30})
</script>